// 解构引入gulp方法
const { src, dest, parallel, series, watch } = require("gulp");
const less = require("gulp-less");
const cleancss = require("gulp-clean-css");
const rename = require("gulp-rename");
const autoprefixer = require("gulp-autoprefixer");
const babel = require("gulp-babel");
const uglify = require("gulp-uglify");
const htmlmin = require("gulp-htmlmin");
const del = require("del");
// 引入服务browserSync
const browserSync = require("browser-sync");
const bs = browserSync.create();
//css构建 任务
// 1，复制src目录下css文件到dist目录下
// 2，编译less文件, 并作css hack
// 3，压缩css文件
// 3，重命名压缩后的css文件
const style = () => {
  return src("src/css/index.css", { base: "src" })
    .pipe(less())
    .pipe(autoprefixer())
    .pipe(cleancss())
    .pipe(
      rename({
        extname: ".min.css",
      })
    )
    .pipe(dest("dist"));
};

// js构建 任务
// 1，复制js文件dist目录下
// 2，js兼容处理--babel
// 3. 压缩js
// 4, 重命名压缩后的js文件
const js = () => {
  return src("src/js/index.js", { base: "src" })
    .pipe(
      babel({
        presets: ["babel-preset-env"],
      })
    )
    .pipe(uglify())
    .pipe(
      rename({
        extname: ".min.js",
      })
    )
    .pipe(dest("dist"));
};
//复制 除index.js之外文件 任务
const copy = () => {
  return src(["src/js/jquery-1.12.4.min.js", "src/js/template-native.js"], { base: "src" }).pipe(dest("dist"));
};
//html处理
// 1，复制html文件到dist目录下
// 2，压缩html文件
const html = () => {
  return src("src/index.html")
    .pipe(
      htmlmin({
        collapseWhitespace: true, //合并空格
        removeComments: true, //去掉注释
        minifyCSS: true, //压缩html文件中的css
        minifyJS: true, //压缩html文件中的js
        processScripts: ["text/html"], //压缩模板引擎模板
      })
    )
    .pipe(dest("dist"));
};
// 删除dist目录 任务
const clean = () => {
  return del(["dist"]);
};
// 服务发布 任务
const serve = () => {
  // gulp wacth("被监听文件", "执行的任务")
  //gulp 监听src下多个文件， 并执行相应构建任务
  watch("src/index.html", html);
  watch("src/css/*.css", style);
  watch("src/js/*.js", js);

  bs.init({
    notify: false, //browserSync connect 提示框 是否显示
    files: "dist/**", //浏览器监听的目录dist下所有文件
    server: {
      baseDir: "./dist",
    },
  });
};
// 构建 任务
// 并行执行
const build = parallel(style, js, copy, html);
// 串行执行
const dev = series(clean, build, serve);
module.exports = {
  build,
  dev,
  serve,
};
